<template>
  <div class="main" id="header" >
    <div class="main-nav clearFix" :class="{helpBG:HelpBG.isHelpBG,helpBG1:HelpBG.isHelpBG1}">
      <div class="logo-left clearFix">
        <span><img :src="imgSrcs.imgSrc"></span>
        <span :class="{color1:oneText.isColor1,color2:oneText.isColor2}">穿云箭</span>
      </div>
      <div class="LoginRegister1" v-show="showLogin.no">
        <ul>
          <li><a :class="{loginone:twoText.isLoginone,logintwo:twoText.isLogintwo}" @click="loginOut">退出</a></li>
        </ul>
      </div>
      <div class="LoginRegister clearFix"  v-show="showLogin.ok">
        <ul>
          <li><a :class="{loginone:twoText.isLoginone,logintwo:twoText.isLogintwo}" @click="regist1">注册</a></li>
          <li><a :class="{loginone1:twoText1.isLoginone,logintwo1:twoText1.isLogintwo}" @click="login1">登录</a></li>
        </ul>
      </div>
      <div class="nav-list clearFix">
        <ul>
          <li v-for="nav1 in navs">
            <span @click="changeColor(nav1)">
              <router-link  :class="{color:colorName == nav1}" :style="{color:nav1.color5}"  :to="nav1.toHref">{{nav1.text}}</router-link>
            </span>
          </li>
        </ul>
      </div>
    </div>
    <!--登录页面-->
    <div>
      <div id="Login1" class="Login" v-show="isDisplay.no" @click="closePopup"></div>
      <div v-show="isDisplay.no">
        <login-frame  @listenLogin="popup"></login-frame>
      </div>
    </div>
    <!--注册页面-->
    <div>
      <div id="Login2" class="Login" v-show="isDisplay.ok" @click="closePopup1"></div>
      <div v-show="isDisplay.ok">
       <regist-frame @listenLogin="popupR"></regist-frame>
      </div>
    </div>
  </div>
</template>
<script>
  //引入
//  import {clickThis} from '../../vuex/actions'
  import img from '../../assets/LOGO_color.png'//红色logo
  import img11 from '../../assets/LOGO_white.png'
  import LoginFrame from './login'
  import RegistFrame from './regist'

  export default {
    data () {
      return {
        showLogin: {//登录与登陆后退出显示切换
          ok: true,
          no: false
        },
        HelpBG: {//头部导航背景色的切换
          isHelpBG: false,//红底
          isHelpBG1:true //白底
        },
        colorName: '',//选中高亮
        oneText: {//logo旁边字颜色切换
          isColor1: true,
          isColor2: false
        },
        twoText: {//注册区样式颜色切换
          isLoginone: true,
          isLogintwo: false
        },
        twoText1: {//登录区样式颜色切换
          isLoginone: true,
          isLogintwo: false
        },
        navs: [
          {
            toHref: '/agent',
            text: '成为代理商',
            isColor: false,
            color5: '#7B8080'
          },
          {
            toHref: '/help',
            text: '帮助中心',
            isColor: false,
            color5: '#7B8080'
          },
          {
            toHref: '/client',
            text: '客户端',
            isColor: false,
            color5: '#7B8080'
          },
          {
            toHref: '/buy',
            text: '购买',
            isColor: false,
            color5: '#7B8080'
          },
          {
            toHref: '/',
            text: '首页',
            isColor: true,
            color5: '#FF7A3F'
          },
        ],
        imgSrcs: {//不同颜色logo切换
          imgSrc: img,//红色logo img11白色logo
        },
        isDisplay: {//登录与注册页面的显示与隐藏
          no: false,
          ok: false
        },
      }
    },
    //注册组件
    components: {LoginFrame, RegistFrame},
    //替换新创建的el实例
    mounted(){
        let token = JSON.parse(sessionStorage.getItem("token"));
        if(token != null){//只要token存在就是登陆状态
          this.navs = JSON.parse(localStorage.getItem("navsList"));//头部填充内容
//          this.showLogin.ok =JSON.parse(localStorage.getItem("navsList2"));//登录状态显示
//          this.showLogin.no =JSON.parse(localStorage.getItem("navsList1"));
          this.showLogin.ok =false;//登录状态显示
          this.showLogin.no =true;
        }else {
          this.showLogin.ok = true;//登录状态显示
          this.showLogin.no = false;

        }
      var router = this.$route.name;//获取当前vue页面的name
      //通过vue的组件决定显示的样式//使页面刷新时状态不改变
      if(router == 'Content'||router == 'Hlep'|| router == 'Agent' || router == 'Account'){
        this.HelpBG.isHelpBG = false;//背景红色
        this.HelpBG.isHelpBG1 = true;//背景白色
        this.$set(this.imgSrcs, 'imgSrc', img);
        this.$set(this.oneText, 'isColor1', true);
        this.$set(this.oneText, 'isColor2', false);
        this.$set(this.twoText, 'isLoginone', true);
        this.$set(this.twoText, 'isLogintwo', false);
        this.$set(this.twoText1, 'isLoginone', true);
        this.$set(this.twoText1, 'isLogintwo', false);
      }else if(router == 'Client' || router == 'Buy') {
        this.HelpBG.isHelpBG = true;
        this.HelpBG.isHelpBG1 = false;
        this.$set(this.imgSrcs, 'imgSrc', img11);
        this.$set(this.oneText, 'isColor1', false);
        this.$set(this.oneText, 'isColor2', true);
        this.$set(this.twoText, 'isLoginone', false);
        this.$set(this.twoText, 'isLogintwo', true);
        this.$set(this.twoText1, 'isLoginone', false);
        this.$set(this.twoText1, 'isLogintwo', true);
      }
      //选中颜色的储存
      let Headercolor7 = JSON.parse(sessionStorage.getItem("Headercolor7"));
      console.log(Headercolor7);
      for(var i = 0; i < this.navs.length; i++) {
         this.navs[i].color5 = Headercolor7[i]
      }
    },
    computed:{
      dataRest:function(){
        //计算返回一组新数据格式-->{'0':'xxx','1':'xxx','2':'xxx'}<--[模拟索引号]]
        var obj = {};
        for(var i = 0; i < this.navs.length; i++) {
            obj[i]= this.navs[i].color5;
        }
        return obj;
      }
    },
    //方法集合
    methods: {
      //点击退出登录状态
      loginOut: function () {
        let _self = this;
        sessionStorage.removeItem('token');//移除缓存
        _self.$set(_self.showLogin, 'ok', true) //显示未登录状态
        _self.$set(_self.showLogin, 'no', false) //隐藏登录状态
        let navs = _self.navs;
        navs.shift();//删除数组第一个元素 pop()方法用于删除数组最后一个元素
        let url = _self.$route.path;
        if(url.indexOf("account") > 0 ){ //当从我的账户页面退出时
          _self.$router.push({path:'/'})//跳转到首页
          _self.navs.forEach(function (el) {
            if(el.text == '首页'){
                el.color5 ='#FF7A3F'
            }
          })
        }
      },
      //点击进入登录窗口
      login1: function () {
        var _self = this;
        //定义背景的显示与隐藏
        _self.$set(_self.isDisplay, 'no', true);

      },
      //登陆页面子组件给父组件传递消息
      popup: function (data) {
        var _self = this;
        _self.$set(_self.isDisplay, 'no', data);
        _self.$set(_self.showLogin, 'ok', data);
        _self.$set(_self.showLogin, 'no', true);//显示登录状态
        var navs = _self.navs;
        //添加一项
        var obj = {
          toHref: '/account',
          text: '我的账户',
          isColor: false,
          color5: '#7B8080'
        }
        navs.unshift(obj);//为数组第一项添加元素
      },
      //关闭登录窗口的方法
      closePopup: function () {
        var _self = this;
        _self.$set(_self.isDisplay, 'no', false);
      },
      //关闭注册窗口的方法
      closePopup1: function () {
        var _self = this;
        _self.$set(_self.isDisplay, 'ok', false);
      },
      //点击进入注册窗口
      regist1: function () {
        var _self = this;
        _self.$set(_self.isDisplay, 'ok', true);
        console.log(this.isDisplay.ok)
      },
      //注册页面传递给父级的消息
      popupR: function (data) {
        var _self = this;
        _self.$set(_self.isDisplay, 'ok', data);
      },
      //选中高亮颜色的具体变化
      changeColor(nav1){
        var _self = this;
        _self.colorName = nav1;
        if (nav1.text == '购买' || nav1.text == '客户端') {
          console.log('000000000000')
          _self.navs.forEach(function (el) {
            if (el == nav1) {
              el.color5 = '#ffffff'
            } else {
              el.color5 = '#7B8080'
            }
          })
          _self.$set(_self.HelpBG, 'isHelpBG', true);
          _self.$set(_self.HelpBG, 'isHelpBG1', false);
          _self.$set(_self.imgSrcs, 'imgSrc', img11);
          _self.$set(_self.oneText, 'isColor1', false);
          _self.$set(_self.oneText, 'isColor2', true);
          _self.$set(_self.twoText, 'isLoginone', false);
          _self.$set(_self.twoText, 'isLogintwo', true);
          _self.$set(_self.twoText1, 'isLoginone', false);
          _self.$set(_self.twoText1, 'isLogintwo', true);
//                  console.log(_self.HelpBG);
        } else {
          _self.navs.forEach(function (el) {
            if (el == nav1) {
              el.color5 = '#FF7A3F'
            } else {
              el.color5 = '#7B8080'
            }
          })
          _self.$set(_self.HelpBG, 'isHelpBG', false);
          _self.$set(_self.HelpBG, 'isHelpBG1', true);
          _self.$set(_self.imgSrcs, 'imgSrc', img);
          _self.$set(_self.oneText, 'isColor1', true);
          _self.$set(_self.oneText, 'isColor2', false);
          _self.$set(_self.twoText, 'isLoginone', true);
          _self.$set(_self.twoText, 'isLogintwo', false);
          _self.$set(_self.twoText1, 'isLoginone', true);
          _self.$set(_self.twoText1, 'isLogintwo', false);
        }
      }
    },
    watch: {
        //左侧logo旁文字的颜色变化
      'oneText.isColor1': function (val, oldval) {
          if(val == null){
              this.$set(this.oneText,'isColor1',true)
              this.$set(this.oneText,'isColor2',false)
          }else {
            localStorage.setItem("Headercolor", JSON.stringify(val));
          }
      },
      'oneText.isColor2': function (val1, oldval) {
        localStorage.setItem("Headercolor1", JSON.stringify(val1));
      },
      //注册注册区颜色变化
      twoText:{
          handler(val2 , oldVal2){
              if(val2.isLoginone == null){
                  this.$set(this.twoText,'isLoginone',true);
                  this.$set(this.twoText,'isLogintwo',false)
              }else {
                localStorage.setItem("Headercolor2", JSON.stringify(val2.isLoginone));
                localStorage.setItem("Headercolor3", JSON.stringify(val2.isLogintwo));
              }
          },
        deep:true
      },
      //登录注册区颜色变化
      twoText1:{
        handler(val21 , oldVal2){
          if(val21.isLoginone == null){
            this.$set(this.twoText1,'isLoginone',true);
            this.$set(this.twoText1,'isLogintwo',false)
          }else {
            localStorage.setItem("Headercolor2", JSON.stringify(val21.isLoginone));
            localStorage.setItem("Headercolor3", JSON.stringify(val21.isLogintwo));
          }
        },
        deep:true
      },
      //导航选中高亮
      colorName:function(newVal4,oldVal3){
        localStorage.setItem("Headercolor4", JSON.stringify(newVal4));
      },
      //左上角logo改变监听
      'imgSrcs.imgSrc':function (newVal5) {
        if(newVal5 == null){
            this.$set(this.imgSrcs,'imgSrc',img)
        }else {
          localStorage.setItem("Headercolor5", JSON.stringify(newVal5));
        }
      },
      //头部导航背景颜色
      'HelpBG.isHelpBG':function (newVal6) {
        localStorage.setItem("Headercolor6", JSON.stringify(newVal6));
      },
      //头部导航背景颜色
      'HelpBG.isHelpBG1':function (newVal7) {
        localStorage.setItem("Headercolor06", JSON.stringify(newVal7));
      },
      //监听函数改变其选中状态选中颜色
      dataRest:{
        handler:function(nowVal,oldVal){
          //观擦计算返回的新数据-->对比新旧值返回差异的[“索引号”]
          for(var i = 0; i < this.navs.length; i++){
            if(nowVal[i] != oldVal[i]) {
            }
          }
          sessionStorage.setItem("Headercolor7", JSON.stringify(nowVal));
        },
        deep:true
      },
      //储存变化后的导航列数组
      navs:{
        handler(valList , oldVal2){
          localStorage.setItem("navsList", JSON.stringify(valList));
        },
        deep:true
      },
      //登陆区域状态显示内容显示
      'showLogin.ok':function (valLogin) {
          localStorage.setItem("navsList2", JSON.stringify(valLogin));
      },
      'showLogin.no':function (valLoginN) {
        localStorage.setItem("navsList1", JSON.stringify(valLoginN));
      }
    }
  }
</script>
<style scoped>
  a{
    text-decoration: none;
    color: #333333;
    cursor:pointer;
  }
  .backgroundColor1{
    background-color:#FF7A3F;
    color: #ffffff;
  }
  .color1{
    color:#FF7A3F;
  }
  .color2{
    color: #ffffff;
  }
  .color{
    color:#FF7A3F;
  }
  .helpBG{
    color: #ffffff;
    background-color:#FF7A3F;
  }
  .helpBG1{
    color: #333333;
    background-color:#ffffff;
  }

  .main{
    font-size: 0.9rem;
    height: 90px;
    width: 100%;
    min-width: 1200px;
    line-height: 70px;
  }
  .main-nav{
    min-width: 960px;
    /*margin: auto;*/
  }
  .main-nav div{
    display: inline-block;
    /*line-height: 70px;*/
  }
  .main-nav ul{
    list-style: none;
  }
  .main-nav ul li{
    display: inline-block;
    text-align: right;
  }
  /*左侧logo*/
  .logo-left{
    float: left;
    width: 15%;
    padding-left: 6%;
    line-height: 90px;

  }
  .logo-left span{
    display: inline-block;
    float: left;
    font-size: 1.2rem;
    vertical-align: middle;
  }
  .logo-left span:last-child{
    padding: 0 0 0 10px;
  }
  .logo-left img{
    height: auto;
    width: auto;
    vertical-align: middle;
  }
  /*右侧导航*/
  .nav-list{
    float: right;
    width: 55%;
  }
  .nav-list ul li{
    float: right;
    /*width: 13%;*/
    padding: 0 4%;
    text-align: right;
  }
  /*.nav-list ul li a:hover{*/
    /*color: #FF7A3F;*/
  /*}*/
  /*登录注册*/
  .LoginRegister{
    float: right;
    width: 18%;
    color: #FF7A3F;
    padding-right: 6%;
  }
  .LoginRegister ul li{
    float: right;
    text-align: right;
    padding-left: 25px;
  }
  .LoginRegister ul li a{
    padding: 5px 15px;
    /*//border: 1px solid #FF7A3F;*/
    border-radius: 30px;
    text-align: center;
  }
  .LoginRegister ul li a:hover{
    color: #ffffff;
    background-color: #FF7A3F;
  }
  .LoginRegister1{
    float: right;
    width: 10%;
    color: #FF7A3F;
    padding-right: 6%;
  }
  .LoginRegister1 ul li{
    float: right;
    text-align: right;
    /*padding-left: 25px;*/
  }
  .LoginRegister1 ul li a{
    padding: 5px 15px;
    /*//border: 1px solid #FF7A3F;*/
    border-radius: 30px;
    text-align: center;
  }
  .LoginRegister ul li a:hover{
    color: #ffffff;
    background-color: #FF7A3F;
  }
  /*注册样式*/
  .loginone{
    border: 1px solid #FF7A3F;
    color: #FF7A3F;
  }
  .logintwo{
    border: 1px solid #ffffff;
    color: #ffffff;
  }
  /*登录样式*/
  .loginone1{
    border: 1px solid #FF7A3F;
    color: #ffffff;
    background-color: #FF7A3F;
  }
  .logintwo1{
    border: 1px solid #ffffff;
    color: #FF7A3F;
    background-color: #ffffff;
  }
  /*清除浮动*/
  .clearFix:after{
    content: '';
    clear: both;
    display: block;
  }
  /*登录背景罩样式块*/
  .Login{
    background: rgba(0, 0, 0, 0.35);
    color: rgb(232, 232, 232);
    line-height: 1.2;
    white-space: pre;
    font-family: Menlo, Consolas, monospace;
    font-size: 13px;
    position: fixed;
    z-index: 9999;
    padding: 10px;
    left: 0px;
    right: 0px;
    top: 0px;
    bottom: 0px;
    overflow: auto;
    text-align: left;
  }
  /*控制显示*/
  .dispaly{
    display: none;
  }
</style>
